<template>
  <view class="container pageBg">
    <image class="logo" :class="{ 'register-logo': isRegistering }" src="/static/logo.png"></image>
    <text class="app-name" :class="{ 'register-name': isRegistering }">月下独阅</text>
    <view v-if="showButtons" class="button-container">
      <button class="button login-button" @click="toggleLogin">登录</button>
      <button class="button register-button" @click="toggleRegister">注册</button>
      <button @click="toggleRead">访客登录</button>
    </view>
    <!-- 登录输入框 -->
    <view v-if="showLogin" class="input-container">
      <text class="label">邮箱：</text>
      <input class="input" type="text" v-model="loginEmail" placeholder="请输入邮箱"></input>
      <text class="label">密码：</text>
      <input class="input" type="password" v-model="loginPassword" placeholder="请输入密码"></input>
      <text v-if="loginError" class="error-message">输入格式错误，请重新输入</text>
      <button class="button login-button" @click="validateLogin">登录</button>
      <button class="button return-button" @click="toggleButtons">返回</button>
    </view>
    <!-- 注册输入框 -->
    <view v-if="showRegister" class="input-container">
      <text class="label">邮箱：</text>
      <input class="input" type="text" v-model="registerEmail" placeholder="请输入邮箱"></input>
      <text class="label">用户名：</text>
      <input class="input" type="text" v-model="registerUsername" placeholder="请输入用户名"></input>
      <text class="label">密码：</text>
      <input class="input" type="password" v-model="registerPassword" placeholder="请输入密码"></input>
      <text class="label">确认密码：</text>
      <input class="input" type="password" v-model="confirmPassword" placeholder="请确认密码"></input>
	  <text class="label">验证码：</text>
	  <view class="verification-code-container">
	    <input class="input" type="text" v-model="emailCode" placeholder="请输入验证码"></input>
	    <button class="button code-button" @click="getEmailCode" :disabled="isCodeButtonDisabled">{{ codeButtonText }}</button>
	  </view>
      <text v-if="registerError" class="error-message">{{ registerError }}</text>
      <button class="button register-button" @click="validateRegister">注册</button>
      <button class="button return-button" @click="toggleButtons">返回</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { apiLogin, apiRegister, apiGetEmailCode } from '../../api/apis';

const showLogin = ref(false);
const showRegister = ref(false);
const showButtons = ref(true);
const loginPassword = ref('');
const loginEmail = ref('');
const registerEmail = ref('');
const emailCode = ref('');
const registerUsername = ref('');
const registerPassword = ref('');
const confirmPassword = ref('');
const loginError = ref(false);
const registerError = ref('');
const isRegistering = ref(false);

const isCodeButtonDisabled = ref(false);
const codeButtonText = ref('获取验证码');
let countdown = 60;

const toggleLogin = () => {
  showLogin.value = true;
  showRegister.value = false;
  showButtons.value = false;
};

const toggleRegister = () => {
  showLogin.value = false;
  showRegister.value = true;
  showButtons.value = false;
  // 设置注册状态标志
  isRegistering.value = true;
};

const toggleButtons = () => {
  showLogin.value = false;
  showRegister.value = false;
  showButtons.value = true;
  isRegistering.value = false;
};

const toggleRead = () => {
  // Navigate to the main page as a guest
  uni.switchTab({
    url: '/pages/index/index'
  });
};

const validateLogin = async () => {
  if (loginPassword.value.length < 6 || loginPassword.value.length > 14) {
    uni.showToast({
      title: "密码长度必须在6-14之间",
      icon: "none"
    });
  } else {
    // 调用登录API
    try {
      const response = await apiLogin({ email: loginEmail.value, password: loginPassword.value });
      // 登录成功后跳转到主页面
      uni.switchTab({
        url: '/pages/index/index'
      });
      uni.showToast({
        title: "登录成功",
        icon: "none"
      });
      // 存储token
      localStorage.setItem('token', response.data.token);
      // 存储用户信息为JSON字符串
      localStorage.setItem('user', JSON.stringify(response.data));
    } catch (error) {
      uni.showToast({
        title: "登录失败，请重试",
        icon: "none"
      });
    }
  }
};

const validateRegister = async () => {
  if (registerPassword.value.length < 6 || registerPassword.value.length > 14 || registerPassword.value !== confirmPassword.value) {
    uni.showToast({
      title: registerPassword.value.length < 6 || registerPassword.value.length > 14 ? '输入格式错误，请重新输入' : '两次输入密码必须保持一致',
      icon: "none"
    });
  } else {
    try {
      // 调用注册API
      const response = await apiRegister({ email: registerEmail.value, username: registerUsername.value, password: registerPassword.value, validateCode: emailCode.value });
      uni.showToast({
        title: "恭喜您！注册成功！",
        icon: "success"
      });
      // 注册成功后返回登录界面
      toggleButtons(); // 显示登录和注册按钮
    } catch (error) {
      uni.showToast({
        title: "注册失败，请重试",
        icon: "none"
      });
    }
  }
};

const getEmailCode = async () => {
  if (!registerEmail.value) {
    registerError.value = '请输入邮箱';
    return;
  }
  try {
    await apiGetEmailCode({
		email:registerEmail.value
	});
    startCountdown();
  } catch (error) {
    registerError.value = '获取验证码失败';
  }
};

const startCountdown = () => {
  isCodeButtonDisabled.value = true;
  codeButtonText.value = `${countdown}s`;
  const interval = setInterval(() => {
    countdown--;
    if (countdown <= 0) {
      clearInterval(interval);
      countdown = 60;
      codeButtonText.value = '获取验证码';
      isCodeButtonDisabled.value = false;
    } else {
      codeButtonText.value = `${countdown}s`;
    }
  }, 1000);
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.logo {
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  margin-bottom: 100rpx; /* 加大logo和文字之间的间隔 */
}

.app-name {
  font-size: 80rpx; /* 加大字体 */
  color: #333;
  margin-bottom: 300rpx; /* 加大文字和按钮之间的间隔 */
  font-weight: bold; /* 字体加粗 */
  text-shadow: 10rpx 10rpx 10rpx #ccc; /* 加阴影 */
  font-family: 'Microsoft YaHei', sans-serif; /* 使用雅黑字体 */
}

.button-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 100rpx; /* 加大文字和按钮之间的间隔 */
}

.button {
  width: 80%;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.input-container {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 20px;
}

.label {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10px;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #ccc;
  border-radius: 40rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  margin-bottom: 20px;
}

.verification-code-container {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.verification-code-container .input {
  flex: 1;
  margin-right: 10px;
}

.code-button {
  height: 80rpx;
  width: 30%;
  padding: 0 20rpx;
  border-radius: 40rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.return-button {
  width: 80%;
  height: 80rpx;
  border-radius: 40rpx;
  background-color: #333;
  color: #fff;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-message {
  color: red;
  margin-bottom: 20px;
}

.register-logo {
  // 在这里添加注册时logo的特殊样式
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  margin-bottom: 20rpx; /* 加大logo和文字之间的间隔 */
}

.register-name {
  font-size: 60rpx; /* 加大字体 */
  color: #333;
  margin-bottom: 30rpx; /* 加大文字和按钮之间的间隔 */
  font-weight: bold; /* 字体加粗 */
  text-shadow: 10rpx 10rpx 10rpx #ccc; /* 加阴影 */
  font-family: 'Microsoft YaHei', sans-serif; /* 使用雅黑字体 */
}
</style>
